<template>
  <div class="big_screen_module">
    <div class="big-screen-dot"></div>
    <header>
      <div class="big-screen-title">
        <div class="button-lf" @click="navigatorToHome"><span>返回首页</span></div>
        <div class="title-center"><span>工艺流程软件数据分析大屏</span></div>
        <div class="button-rg"><span>导出数据</span></div>
      </div>
      <div class="big-screen-pagination">
        <div class="big-screen-button">
          <span>默认图表</span>
        </div>
        <div class="big-screen-button">
          <span>默认图表2</span>
        </div>
        <div class="big-screen-button">
          <span>默认图表3</span>
        </div>
      </div>
    </header>
    <section>
      <div class="chart-column-lf">
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>任务状态统计</span>
            </div>
          </div>
          <div class="chart-body">
            <basic-card
              v-for="card in mock_cardsList"
              :key="card.title"
              :num="card.num"
              :rate="card.rate"
              :type="mapCardType[card.key]"
              :title="mapZhCN[card.title]"
              :subTitle="card.subTitle"
              class="card"
            />
          </div>
        </div>
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>表类型统计</span>
            </div>
          </div>
          <div class="chart-body">
            <meter-pie :pieData="mock_meterType"></meter-pie>
          </div>
        </div>
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>模拟模块</span>
            </div>
          </div>
          <div class="chart-body">
            <dynamic-bar
              class="dynamic-bar"
              :controller="selectedController"
              :data="FormatedDataForBar"
              @onChartSelectedChange="onChartSelectedChange"
            />
          </div>
        </div>
      </div>
      <div class="chart-column-ct">
        <div class="chart-map">
          <meter-map></meter-map>
        </div>
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>任务完成情况</span>
            </div>
          </div>
          <div class="chart-body">
            <dynamic-line
              class="dynamic-line"
              :controller="selectedController"
              :data="mock_tasksLine"
              @onChartSelectedChange="onChartSelectedChange"
            />
          </div>
        </div>
      </div>
      <div class="chart-column-rg">
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>员工关联占比</span>
            </div>
          </div>
          <div class="chart-body">
            <div class="tags">
              <span
                v-for="(tag, k) in mapZhCN"
                :key="k"
                :class="{
                  'is-active': selectedType === k
                }"
                @click="selectedType = k.toString()"
              >
                {{ tag }}
              </span>
            </div>
            <el-table :data="FormatedDataForTable" size="mini" height="150" style="width: 100%">
              <el-table-column prop="name" label="员工" width="100" />
              <el-table-column prop="apart" label="部门" width="100" />
              <el-table-column :prop="selectedType" :label="mapZhCN[selectedType]">
                <template v-slot="scope">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="16"
                    text-color="#24263A"
                    :percentage="scope.row[selectedType]"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>员工绩效统计</span>
            </div>
          </div>
          <div class="chart-body">
            <dynamic-bar
              class="dynamic-bar"
              :controller="selectedController"
              :data="FormatedDataForBar"
              @onChartSelectedChange="onChartSelectedChange"
            />
          </div>
        </div>
        <div class="chart-zone">
          <div class="chart-header">
            <div class="chart-title">
              <span>模拟模块</span>
            </div>
          </div>
          <div class="chart-body">
            <meter-pie :pieData="mock_meterType"></meter-pie>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
// import * as echarts from 'echarts'
import BasicCard from '@/components/echarts/basic_card.vue'
import MeterPie from '../compoents/BigScreen/MeterPie.vue'
import MeterMap from '../compoents/BigScreen/MeterMap.vue'
import DynamicBar from '@/components/dashboard/DynamicBar.vue'
import DynamicLine from '@/components/dashboard/DynamicLine.vue'
import { Dictionary } from '@/interface/Basic'
function generateRandomArray(length: number) {
  const array = []
  for (let i = 0; i < length; i++) {
    array.push(Math.floor(Math.random() * 100))
  }
  return array
}
function generateDateArray(startDate: string, length: number) {
  const dates = []
  const currentDate = new Date(startDate)
  for (let i = 0; i < length; i++) {
    dates.push(new Date(currentDate))
    currentDate.setDate(currentDate.getDate() + 1)
  }
  return dates.map(date => date.toLocaleDateString())
}
@Component({
  components: {
    BasicCard,
    MeterPie,
    MeterMap,
    DynamicBar,
    DynamicLine
  }
})
class BigScreen extends Vue {
  pre_theme: 'dark' | 'light' = 'dark'
  mock_cardsList: Dictionary<string | number>[] = [
    { num: 423, rate: 0.02, key: 'underway', title: 'completed', subTitle: '较上周' },
    { num: 45, rate: 0.032, key: 'approach', title: 'approach', subTitle: '较上周' },
    { num: 352, rate: -0.015, key: 'completed', title: 'underway', subTitle: '较上周' },
    { num: 165, rate: 0.012, key: 'overtime', title: 'overtime', subTitle: '较上周' }
  ]
  mapZhCN: Dictionary<string> = {
    completed: '已完成',
    approach: '即将超时',
    overtime: '已超时',
    underway: '进行中'
  }
  mapCardType: Dictionary<string> = {
    completed: 'success',
    approach: 'warning',
    overtime: 'error',
    underway: 'primary'
  }
  mock_meterType = {
    WA6: 251,
    WA8: 23,
    WA9: 2681,
    WA1: 356,
    WA4: 56,
    哈特: 15,
    真兰: 6,
    埃科: 7
  }
  mock_tasksLine: Dictionary<string[] | number[]> = {
    xData: generateDateArray('2022-3-1', 50),
    underway: generateRandomArray(50),
    completed: generateRandomArray(50),
    approach: generateRandomArray(50),
    overtime: generateRandomArray(50)
  }
  mock_employee = [
    {
      name: '一号用户',
      apartment: '生产部',
      total: 98,
      tasks: {
        completed: 34,
        approach: 25,
        overtime: 26,
        underway: 15
      }
    },
    {
      name: '二号用户',
      apartment: '生产部',
      total: 82,
      tasks: {
        completed: 25,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '三号用户',
      apartment: '生产部',
      total: 43,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '四号用户',
      apartment: '生产部',
      total: 132,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '五号用户',
      partment: '生产部',
      total: 34,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '六号用户',
      apartment: '生产部',
      total: 78,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    },
    {
      name: '七号用户',
      apartment: '生产部',
      total: 56,
      tasks: {
        completed: 10,
        approach: 11,
        overtime: 26,
        underway: 5
      }
    }
  ]
  selectedType: string = 'completed'
  get FormatedDataForBar() {
    const xAxisData: string[] = []
    const completedData: number[] = []
    const approachData: number[] = []
    const overtimeData: number[] = []
    const underwayData: number[] = []
    this.mock_employee.forEach(employee => {
      const { completed, approach, underway, overtime } = employee.tasks
      xAxisData.push(employee.name)
      completedData.push(completed)
      approachData.push(approach)
      overtimeData.push(overtime)
      underwayData.push(underway)
    })
    return {
      xAxisData,
      approachData,
      overtimeData,
      underwayData,
      completedData
    }
  }
  get FormatedDataForTable() {
    const totalNum: Dictionary<number> = {}
    this.mock_cardsList.forEach(card => {
      totalNum[card.title] = card.num as number
    })
    const result = this.mock_employee.map(employee => {
      const { name, apartment, tasks } = employee
      const { completed, approach, overtime, underway } = tasks
      return {
        name: name,
        apart: apartment,
        completed: Number(((completed / totalNum.completed) * 100).toFixed(2)),
        approach: Number(((approach / totalNum.approach) * 100).toFixed(2)),
        overtime: Number(((overtime / totalNum.overtime) * 100).toFixed(2)),
        underway: Number(((underway / totalNum.underway) * 100).toFixed(2))
      }
    })
    console.log(result)
    return result
  }
  mounted() {
    this.pre_theme = this.$store.getters.theme
    this.$store.dispatch('theme/changeTheme', {
      theme: 'dark'
    })
  }
  beforeDestroy() {
    this.$store.dispatch('theme/changeTheme', {
      theme: this.pre_theme
    })
  }
  selectedController: Dictionary<boolean> = {
    进行中: true,
    已完成: true,
    即将完成: true,
    已超时: true
  }
  onChartSelectedChange(e: { selected: Dictionary<boolean> }) {
    const { selected } = e
    this.selectedController = selected
  }
  navigatorToHome() {
    this.$destroy()
    this.$router.push('/')
  }
}
export default BigScreen
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.big_screen_module {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1002;
  box-sizing: border-box;
  padding: 20px;
  background-color: #14142b;
  #flex(column, center, flex-start);
  .big-screen-dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%) translateY(-40px) translateZ(-1px);
    width: 200px;
    height: 100px;
    filter: blur(50px);
    background-color: #09b1ec;
  }
  header {
    width: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
    #flex(column, center, flex-start);
    .big-screen-title {
      width: 100%;
      height: 38px;
      pointer-events: initial;
      #flex(row, flex-start, center);
      .button-lf,
      .button-rg {
        position: relative;
        width: 567px;
        cursor: pointer;
        span {
          position: absolute;
          top: 0;
          display: inline-block;
          width: 136px;
          height: 42px;
          line-height: 42px;
          padding-right: 4px;
          background-size: 100% 100%;
          color: aqua;
          font-size: 18px;
          font-weight: 900;
        }
      }
      .button-lf > span {
        right: 0;
        background: url('../../../assets/bigScreen/button_lf.png') no-repeat;
      }
      .button-rg > span {
        left: 0;
        background: url('../../../assets/bigScreen/button_rg.png') no-repeat;
      }
      .title-center {
        flex: 1;
        span {
          display: inline-block;
          line-height: 78px;
          width: 100%;
          color: aqua;
          font-size: 20px;
          font-weight: 900;
          background: url('../../../assets/bigScreen/bg_ct.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .big-screen-pagination {
      margin-top: 60px;
      pointer-events: initial;
      #flex(row, center, center);
      .big-screen-button {
        position: relative;
        margin: 0 10px;
        box-sizing: border-box;
        padding: 5px 10px;
        background-color: #14142b;
        background: url('../../../assets/bigScreen/button_base.png') no-repeat;
        background-size: 100% 100%;
        span {
          color: aqua;
          font-size: 18px;
          font-weight: 900;
        }
      }
    }
  }
  section {
    box-sizing: border-box;
    flex: 1;
    width: 100%;
    padding: 0 100px;
    #flex(row, flex-start, center);
    .chart-column-lf,
    .chart-column-rg {
      width: 402px;
      height: calc(100% + 100px);
      margin-top: -100px;
    }
    // chart-zone 样式
    .chart-column-ct,
    .chart-column-lf,
    .chart-column-rg {
      #flex(column, center, space-between);
      .chart-zone {
        width: 100%;
        .chart-header {
          width: 100%;
          #flex(row, center, space-between);
          .chart-title {
            box-sizing: border-box;
            padding: 10px 15px;
            margin-bottom: 10px;
          }
          span {
            color: aqua;
            font-size: 18px;
            font-weight: 900;
          }
        }
        .chart-body {
          box-sizing: border-box;
          padding: 10px;
          width: 100%;
          height: 210px;
          border-radius: 5px;
          flex-wrap: wrap;
          border: solid 1px aqua;
          background-color: #24263a;
          #flex(row, center, flex-start);
          /deep/.card {
            margin: 5px;
            min-width: 180px;
            border-radius: 0;
            box-shadow: unset;
            transition: all 0.2s ease;
            header {
              margin-bottom: 3px;
              span,
              i {
                line-height: 20px;
              }
              i {
                width: 20px;
              }
            }
          }
          .card:hover {
            transform: translateY(-5px);
            #shadow-color(0, 0, 4px, 1px, --primary-shadow-color);
          }
        }
      }
      .chart-zone:last-child {
        margin-bottom: 0;
      }
    }
    // chart-title 按钮图片
    .chart-column-lf,
    .chart-column-ct {
      .chart-zone > .chart-header > .chart-title {
        background: url('../../../assets/bigScreen/button_lf.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .chart-column-rg {
      .chart-zone {
        .chart-header {
          flex-direction: row-reverse;
          .chart-title {
            background: url('../../../assets/bigScreen/button_rg.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .chart-body {
          #flex(column, center, flex-start);
          .tags {
            span {
              font-size: 14px;
              color: #ffffff;
              padding: 0 5px;
              border-right: solid 1px #ffffff;
            }
            span:last-child {
              border-right: 0;
            }
            .is-active {
              color: aqua;
            }
          }
          /deep/.el-table {
            .el-table__header-wrapper,
            .el-table__body-wrapper {
              tr {
                background-color: #24263a;
                th {
                  background-color: #24263a;
                }
              }
              .el-table__row:hover > .el-table__cell {
                background-color: #14142b;
              }
            }
          }
        }
      }
    }
    .chart-column-ct {
      flex: 1;
      margin: 0 20px;
      height: 100%;
      #flex(column, center, space-between);
      .chart-map {
        width: 100%;
        flex: 1;
      }
    }
  }
}
</style>
